<template>
    <div class="product">
        <el-container>
            <el-container>
                <el-header>商品评论管理</el-header>
                <el-main>
                    <div class="box">
                        <el-row class="timeBox">
                            <el-col :xs="24" :sm='24' :md='24' :lg='12'>
                                <div class="timeDiv">
                                    <span>时间选择:</span>
                                    <el-radio-group v-model="seach.radio1" @change="radioFun" fill='#409EFF'>
                                        <el-radio-button label="" border>全部</el-radio-button>
                                        <el-radio-button label="today" border>今天</el-radio-button>
                                        <el-radio-button label="yesterday" border>昨天</el-radio-button>
                                        <el-radio-button label="lately7" border>最近7天</el-radio-button>
                                        <el-radio-button label="lately30" border>最近30天</el-radio-button>
                                        <el-radio-button label="month" border>本月</el-radio-button>
                                        <el-radio-button label="year" border>本年</el-radio-button>
                                    </el-radio-group>
                                </div>
                                </el-col>
                                <el-col :xs="24" :sm='24' :md='24' :lg='12'>
                                <div>
                                    <el-date-picker
                                        v-model="seach.value1"
                                        value-format='yyyy/MM/dd'
                                        type="daterange"
                                        @change="dateFun"
                                        range-separator="——"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                                    </el-date-picker>
                                </div>
                            </el-col>
                        </el-row>

                        <el-row class="ping">
                        <el-col :xs="24" :sm='24' :md='12' :lg='8'>
                            <div>
                                <span>评价状态：</span>
                                <el-select v-model="seach.values" @change="selectFun" placeholder="请选择">
                                    <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            </el-col>
                            <el-col :xs="24" :sm='24' :md='12' :lg='8'>
                            <div>
                                <span>商品信息：</span>
                                <el-input v-model="input" placeholder="请输入内容"></el-input>
                            </div>
                            </el-col>
                            <el-col :xs="24" :sm='24' :md='12' :lg='8'>
                            <div>
                                <span>用户名称:</span>
                                <el-input v-model="inputs" placeholder="请输入内容"></el-input>
                                <el-button type="primary" @click="seachFun" icon="el-icon-search"> 搜 索</el-button>
                            </div>
                            </el-col>
                        </el-row>
                        <el-button type="primary" @click="addFun" icon="el-icon-plus" >添加虚拟评论</el-button>
                        <Tables :ra-dio="seach"></Tables>
                    </div>
                </el-main>
            </el-container>
        </el-container>
        <MaskT :form-list="form" @addlist='addlistFun'></MaskT>
    </div>

</template>
<script>
import Tables from '../../components/Tables'
import MaskT from '../../components/maskT'
export default {
    components:{
        Tables,MaskT
    },
    data() {
        return {     
            options: [{
                value: 1,
                label: '已回复'
                }, 
                {
                value: 0,
                label: '未回复'
                }
            ],
            form: {
                dialogFormVisible:false,
                comment:'',
                nickname:'',
                product_score:0,
                pics:[],
                image:{
                    image:'',
                    product_id:''
                },
                avatar:'',
                service_score:0
            },
            seach:{
                value1:'',
                radio1: '',
                values: '',
                input:'',
                inputs:'',
                huidiao:'',
            },
            input:'',
            inputs:'',
        }
    },
    methods:{
        // 添加完成回调函数
        addlistFun(val){
            this.form.dialogFormVisible=val
            this.seach.huidiao=1
        },
        // 时间点击选择
        radioFun(val){
            this.seach.radio1=val
        },
        // 时间
        dateFun(){
            let time=`${this.seach.value1[0]}-${this.seach.value1[1]}`
            this.seach.radio1=time
        },
        // 评价状态下拉
        selectFun(val){
            this.seach.values=val
        },
        // 商品信息名称搜素
        seachFun(){
            this.seach.input=this.input
            this.seach.inputs=this.inputs
        },
        // 添加
        addFun(){
            this.form.dialogFormVisible=true
            this.form.comment='',
            this.form.nickname='',
            this.form.product_score=0,
            this.form.pics=[],
            this.form.image={
                image:'',
                product_id:''
            },
            this.form.avatar='',
            this.form.service_score=0
        }
    }
}
</script>
<style lang="scss" scoped>
.el-header{
    width: 100%;
    background: white;
}
.row{
    width:100%;
    display: flex;
}
.product{
    width: 100%;
    height: 100%;
}
.el-header, .el-footer {
    color: #333;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    width: 100%;
    height: 100%;
    background-color: #E9EEF3;
    color: #333;
    box-sizing: border-box;
    padding: 20px;
    .box{
        width: 100%;
        height: 100%;
        background: white;
        .timeBox{
            width: 100%;
            height: 50px;
            line-height: 50px;
            span{
                display: inline-block;
                width: 100px;
                text-align: center;
            }
            .timeDiv{
                width:700px;
            }
        }
        .ping{
            width: 100%;
            height: 50px;
            line-height: 50px;
            span{
                display: inline-block;
                width: 100px;
                text-align: center;
            }
            div{
                display: flex;
                align-items: center;
            }
        }
    }
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>